<template>
	<view>
		<view class="discuss animated fadeIn fast">
			<view class="title u-f-ac">
				<text v-if="type=='hot'">精彩评论</text>
				<text v-if="type=='new'">最新评论</text>
			</view>
			<view v-if="Comment.length>=1" 
			class="content">
				<view class="content_item"
				v-for="(item,index) in Comment"
				:key="index"
				>
					<view class="userinfo">
						<view class="userinfo_img" >
							<image mode="widthFix" style="width: 100%" 
							:src="item.pic"
							/>
						</view>
						<view class="userinfo_name">
							<text class="name">{{item.nickname}}</text>
							<text class="time" >{{Time[index]}}</text>
						</view>
						<view class="userinfo_praise">
							<text >{{item.likedCount}}</text>
							<image mode="widthFix"   src="../../../static/icon/xg.png" />
						</view>
					</view>
					<view class="word">
						<text  >{{item.content}}</text>
					</view>
				</view>
			</view>
			<view v-else  class="not">暂无评论</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			type:String,
			Comment:Array,
			Time:Array,
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.discuss{
		.title{
			height: 60upx;
			font-size: 28upx;
			background-color: #eeeff0;
			padding-left: 10upx;
		}
		.content{
			.content_item{
				padding-bottom: 10upx;
				border-bottom: 1upx solid #e6e7e8;
				.userinfo{
					display: flex;
					padding: 20upx 10upx 10upx 10upx;
					.userinfo_img{
						flex: 2;
						image{
							width: 100%;
							border-radius: 50%;
						}
					}
					.userinfo_name{
						flex: 12;
						padding-left: 20upx;
						display: flex;
						flex-direction: column;
						justify-self: center;
						.name{
							font-weight: 500;
							font-size: 28upx;
							padding-bottom: 10upx;
						}
						.time{
							color: #cccccc;
							font-weight: 600;
							font-size: 22upx;
						}
					}
					.userinfo_praise{
						flex: 3;
						text{
							font-size: 24upx;
							padding-right: 10upx;
						}
						image{
							transform: translateY(15%);
							width: 30%;
						}
					}
				}
				.word{
					width: 100%;
					padding: 10upx 10upx 10upx 100upx;
					font-size: 26upx;
				}
			}
		}
		.not{
			font-size: 28upx;
			padding: 10upx;
		}
	}
</style>
